<template>
  <div class="my-page">
    <div class="my-top">
      <div class="my-box">
        <div class="my-img">
          <img :src="imgurl" />
        </div>
        <div class="my-name">{{name.substr(0,12)}}</div>
      </div>
    </div>
    <div class="my-list">
      <!-- <div class="my-list-box">
        <div class="my-list-img">
          <img
            src="../../common/image/cart.png"
          />
        </div>
        <div class="my-list-title">我已购买</div>
        <div class="my-list-btn">
           <img
            src="../../common/image/arrow_right.png"
          />
        </div>user
      </div>-->

      <div class="my-list-box" @click="gotolsst">
        <div class="my-list-img">
          <img src="../../common/image/order.png" />
        </div>
        <div class="my-list-title">历史收听</div>
        <div class="my-list-btn">
          <img src="../../common/image/arrow_right.png" />
        </div>
      </div>

      <!-- <router-link tag="div" class="tab-item" to="/lxwmPage">
        <div class="my-list-box">
          <div class="my-list-img">
            <img src="../../common/image/sub_account.png" />
          </div>
          <div class="my-list-title">优惠</div>
          <div class="my-list-btn">
            <img src="../../common/image/arrow_right.png" />
          </div>
        </div>
      </router-link>-->
      <div class="my-list-box" @click="addFins">
        <div class="my-list-img">
          <img src="../../common/image/sub_account.png" />
        </div>
        <div class="my-list-title">加入粉丝团</div>
        <div class="my-list-btn">
          <img src="../../common/image/arrow_right.png" />
        </div>
      </div>
      <div class="my-list-box" @click="openService">
        <div class="my-list-img">
          <img src="../../common/image/lxkf.png" />
        </div>
        <div class="my-list-title">联系客服</div>
        <div class="my-list-btn">
          <img src="../../common/image/arrow_right.png" />
        </div>
      </div>
    </div>
    <Modal v-model="addtuan" width="360" :mask-closable="false" :closable="false">
      <p slot="header" style="color:#81cd72;text-align:center;font-size: 22px;
  font-weight: 500;">
        <Icon type="information-circled"></Icon>
        <span>加入粉丝团</span>
      </p>
      <div style="text-align:center">
        <div v-html="joinfansContenx" class="join"></div>
      </div>
      <div slot="footer" style="text-align: center;">
        <i-button @click="addFinsEnter" type="success">确定</i-button>
      </div>
    </Modal>
    <Modal v-model="addService" width="360" :mask-closable="false" :closable="false">
      <p slot="header" style="color:#81cd72;text-align:center;font-size: 22px;
  font-weight: 500;">
        <Icon type="information-circled"></Icon>
        <span>联系客服</span>
      </p>
      <div style="text-align:center">
        <p>发送消息后我们将在24小时内联系您！</p>
        <Input
          v-model="TextService"
          maxlength="100"
          show-word-limit
          type="textarea"
          placeholder="请输入您的意见或问题"
          style="width: 80%"
          :autofocus="true"
        />
      </div>
      <div slot="footer" style="text-align: center;">
        <i-button @click="addServiceFun" type="success">确定</i-button>
        <i-button @click="CloseService">取消</i-button>
      </div>
    </Modal>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      name: "未登录",
      imgurl: "",
      addtuan: false,
      addService: false,
      TextService: "",
      joinfansContenx: "",
      wid: 0
    };
  },
  // watch: {
  //   $route(to, from) {
  //     console.log(to);
  //     console.log(from);
  //     if (to.name == "MyPage") {
  //       window.addEventListener("popstate", this.backChange, false);
  //     } else {
  //       window.removeEventListener("popstate", this.backChange, false);
  //     }
  //   }
  // },

  destroyed() {
    // alert("销毁了")
    //window.removeEventListener("popstate", this.backChange, false);
  },
  mounted() {
    //sessionStorage.clear();
    //history.pushState(null, null, document.URL);
    //window.addEventListener("popstate", this.backChange, false);
  },

  created() {
    this.init();
  },
  methods: {
    gotolsst() {
      var _this = this;
      _this.$router.push({ path: "/user" });
    },
    backChange() {
      //history.pushState(null, null, document.URL);
      var _this = this;
      _this.addtuan = false;
      _this.addService = false;
      window.removeEventListener("popstate", this.backChange, false);
      // if (_this.addtuan == true || _this.addService == true) {

      // } else {

      //   //console.log("123123")
      //   //_this.$router.push({ path: "/Recommend", replace: true });
      //   //this.$router.go(-1);
      //   //_this.$destroy();
      //   //window.removeEventListener("popstate", this.backChange, false);
      //   // _this.$router.push({
      //   //   path: "fenxiangfanxian"
      //   // });
      // }
    },
    init() {
      var _this = this;
      var storage = window.localStorage;
      var json = storage.getItem("userInfo");
      var jsonObj = JSON.parse(json);

      _this.name = jsonObj.nickname;
      _this.imgurl = jsonObj.headimg_url;
      _this.wid = jsonObj.id;
    },
    //关闭联系客服
    CloseService() {
      
      var _this = this;
      _this.TextService = "";
      _this.addService = false;
      window.removeEventListener("popstate", this.backChange, false);
      //console.log("点了关闭了")
    },
    //打开联系客服
    openService() {
      var _this = this;
      _this.addService = true;
      sessionStorage.clear();
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", this.backChange, false);
    },
    //联系客服
    addServiceFun() {
      var _this = this;
      const url = "http://www.shizilaoba.com/lion/contact/add"; //调用自定义的接口
      const data = Object.assign(
        {},
        {
          wid: _this.wid,
          content: _this.TextService
        }
      );
      axios.post(url, data).then(res => {
        console.log(res.data);
        _this.TextService = "";
        _this.addService = false;
        _this.$Message.success("成功");
        window.removeEventListener("popstate", this.backChange, false);
      });
    },
    //加入粉丝团
    addFins() {
      var _this = this;
      sessionStorage.clear();
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", this.backChange, false);
      _this.addtuan = false;
      _this.addtuan = true;
      console.log("+++++++++++");
      console.log(_this.addtuan);
      const url = "http://www.shizilaoba.com/lion/fans/query"; //调用自定义的接口
      const data = Object.assign({}, {});
      axios.post(url, data).then(res => {
        console.log(res.data);
        _this.joinfansContenx = res.data.data.content;
      });
    },
    //加入粉丝团确定
    addFinsEnter() {
      var _this = this;
      _this.addtuan = false;
      window.removeEventListener("popstate", this.backChange, false);
    }
  }
};
</script>

<style>
.join img {
  width: 100%;
}
.my-page {
  width: 100%;
  height: 100%;
}
.my-page .my-top {
  width: 100%;
  height: 150px;
  border-bottom: 1px solid #e4e4e4;
}
.my-page .my-top .my-box {
  width: 90%;
  height: 150px;
  margin: 0 auto;
  line-height: 150px;
}
.my-page .my-top .my-box .my-img {
  width: 80px;
  height: 150px;
  position: relative;
  float: left;
}
.my-page .my-top .my-box .my-img img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  top: 25%;
}
.my-page .my-top .my-box .my-name {
  height: 150px;
  float: left;
  padding-left: 20px;
  font-size: 22px;
}
.my-page .my-list {
  width: 100%;
}
.my-page .my-list .my-list-box {
  width: 90%;
  margin: 0 auto;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #e4e4e4;
}
.my-page .my-list .my-list-box .my-list-img {
  width: 60px;
  height: 60px;
  position: relative;
  float: left;
}
.my-page .my-list .my-list-box .my-list-img img {
  width: 30px;
  height: 30px;
  float: left;
  position: absolute;
  top: 25%;
  left: 25%;
}
.my-page .my-list .my-list-box .my-list-title {
  float: left;
}
.my-page .my-list .my-list-box .my-list-btn {
  width: 60px;
  height: 60px;
  position: absolute;
  float: left;
  right: 5%;
}
.my-page .my-list .my-list-box .my-list-btn img {
  width: 30px;
  height: 30px;
  float: left;
  position: absolute;
  top: 25%;
  left: 25%;
}
</style>